<template>
  <Navbar />
  <div class="as-a-whole">
    <!-- 整体一个结构 -->
    <!-- 左边 -->
    
  <div class="leftfome">
    <div class="left-container">
      <!-- 登录头 -->
      <el-card class="header-login" :style="{ marginBottom: '10px' }" shadow="always">
        <div class="headportrait">
          <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
        </div>
        <div class="name_container " :style="{ marginBottom: '10px' }">
          <p>不开心的小鬼</p>

          <span :style="{ fontSize: '14px'}">
            <el-tag :style="{marginTop:'6px' ,backgrount:''}">Lv.1</el-tag>
          </span>
        </div>
        <!--关注和粉丝 -->
        <div class="rightfan">
          <div class="el-left">
            <p :style="{margin:' 0 0 7px'}">0</p>
            <p>关注</p>
          </div>
          <div class="el-right">
            <p :style="{margin:' 0 0 7px'}">0</p>
            <p>粉丝</p>
          </div>
        </div>
      </el-card>
      <!-- 资源动态 -->
      <el-card body-style="padding:10px" @click="goToResources"
        :style="{ marginBottom: '10px', marginRight:'10px',display:' block'}" shadow="always">

        <div class="Resourcesleft">资源动态</div>

      </el-card>
      <!-- 我的会员列表 -->
      <el-card class="cardddbox" :style="{ marginBottom: '10px', marginRight:'10px',display:' block'}" shadow="always">
        <div class="myvip" @click="goTovip">我的会员</div>
        <div class="myvip" @click="goTomoney">我的钱包</div>
        <div class="myvip" @click="goToCoupons">我的优惠券</div>
        <div class="myvip" @click="goToorder">我买的订单</div>
        <!-- 我卖的下拉列表 -->
        <div class="content_left_top">
          <div class="myvip2" @click="isShow = !isShow,Verticalbar=0" :class="Verticalbar===0?'Verticalbar':''"
            @mouseenter="Verticalbar=0" @mouseleave="Verticalbar=-1">
            <p>我卖的 </p>
            <!-- 右和下的箭头 -->
            <el-icon :style="{width:'12px'}" v-if="!isShow">
              <ArrowRight />
            </el-icon>
            <el-icon :style="{width:'12px'}" v-else>
              <ArrowDown />
            </el-icon>
          </div>
          <div>
            <p class="content_left_top_yxiang" v-if="isShow" @click="gotoNavigation">订单管理</p>
            <p class="content_left_top_yxiang" v-if="isShow" @click="gotoNavigation">商品管理</p>
            <p class="content_left_top_yxiang" v-if="isShow" @click="gotoNavigation">客户管理</p>
            <p class="content_left_top_yxiang" v-if="isShow" @click="gotoNavigation">待收款</p>
            <p class="content_left_top_yxiang" v-if="isShow" @click="gotoNavigation">优惠管理</p>
            <p class="content_left_top_yxiang" v-if="isShow" @click="gotoNavigation">评价管理</p>
            <p class="content_left_top_yxiang" v-if="isShow" @click="gotoNavigation">保证金</p>
          </div>
        </div>

      </el-card>
      <!-- 我的资料 -->
      <el-card body-style="padding:10px" @click="goToData"
        :style="{ marginBottom: '10px', marginRight:'10px',display:' block'}" shadow="always">

        <div class="Resourcesleft">我的资料</div>

      </el-card>
    </div>
  </div>
    <!-- 右边的结构 -->
    <router-view></router-view>
  </div>
  <Button />

</template>
  
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Mine",
});
</script>
  
<script setup lang="ts">
// 默认图片
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import { reactive, toRefs } from 'vue'
import { TabNavProps } from "element-plus";
import { useRouter } from "vue-router";
import { ref } from "vue";
const Router = useRouter()
//跳转到资源动态
const goToResources = () => {
  Router.push("/Mine/Resources")
}

//跳转到我的会员
const goTovip = () => {
  Router.push("/Mine/Vip")
}

//跳转到我的钱包
const goTomoney = () => {
  Router.push("/Mine/Money")
}
//跳转到我的优惠券
const goToCoupons = () => {
  Router.push("/Mine/Coupons")
}
//跳转到我的订单
const goToorder = () => {
  Router.push("/Mine/Coupons")
}
//跳转到我卖的
const goToSell = () => {
  Router.push("/Mine/Sell")
}
// 跳转到我卖的
const goToData = () => {
  Router.push("/Mine/Data")
}
const isShow = ref(false)
const router = useRouter()
const dialogVisible = ref(false)
let Verticalbar = ref(0)
//1.左边侧边栏路由跳转导航
const leftRouteTo = (num: number) => {
  Verticalbar.value = num
  //然后路由跳转
  router.replace({
    path: "/studio/navigation",
    query: {
      num
    }
  })

}

//2.点击练习室 导航去练习室路由
const gotoNavigation = () => {
  //然后路由跳转
  Verticalbar.value = 0
  router.push("/studio/studioss")
}
//3.点击出来弹窗
const Dialogs = () => {

}
</script>   
<style lang="scss" scoped>
.as-a-whole {
  display: flex;
  padding:0, 10px;
  margin-top: 10px;
  min-height: 790px;
  width: 1300px;
  margin: 0 auto;
}

.left-container {
  float: left;
  margin: auto;

}

.header-login {
  width: 170px;
  height: 260px;
  margin-right: 10px;
}

:deep.datafrom {
  background-color: darkgray;
}

/* 下面的名字 */
.name_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
  font-size: 15px;
}

.rightfans {
  width: 50%;
  /* padding-top: 18px; */
}

.el-left {
  float: left;
  font-size: 14px;
  text-align: center;
  padding-top: 9px;
  padding-left: 15px;
}

.el-right {
  float: right;
  font-size: 14px;
  text-align: center;
  padding-top: 9px;
  padding-right: 15px;
}

.Resourcesleft {
  font-size: 14px;
  color: #111;
  margin-left: -10px;
  padding: 17px 21px;
  border-left: 4px solid #fff
}

.Resourcesleft:hover {
  border-left: 4px solid #f93684;
}

.myvip {
  font-size: 14px;
  color: #111;
  margin-left: -20px;
  padding: 17px 21px;
  border-left: 4px solid #fff
}

.myvip:hover {
  border-left: 4px solid #f93684;
}
.leftfome{
  overflow: hidden;
}

/* 下拉列表 */
.ArrowRight {
  width: 12px;
  height: 12px;
}
.myvip2{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #111;
  margin-left: -20px;
  padding: 17px 21px;
  border-left: 4px solid #fff
}
.myvip2:hover {
  border-left: 4px solid #f93684;
}
.content_left_top_yxiang{
  // height: 200px;
  font-size: 14px;
  padding: 12px 0 12px 49px;
  
  padding: 10px;
    font-size: 14px;
}

</style>